<template>
	<view>
		<u-loading-page :loading="loadding" loading-mode="semicircle" loading-text="加载中"></u-loading-page>
		<view v-if="!loadding" class="policy_box">
			<view class="policy_list" v-if="data !== undefined && data!== null && data .length>0">
				<view class="ha_setup_box">
					<view class="ha_setup">
						<view class="ha_setup_list ha_setup_tit">
							<text class="average">序号</text>
							<text class="average">代理</text>
							<text class="average">产品</text>
							<text class="average">操作</text>
						</view>
						<view class="ha_setup_list" v-for="(item,index) in data" :key="index">
							<text class="average">{{index+1}}</text>
							<text class="average">{{item.name}}</text>
							<text class="average">{{item.product}}</text>
							<view class="average setup_btn">
								<text class="setup" @click="setup(item.id)">设置</text>
								<text class="dels" @click="dels(item.id)">删除</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-empty v-else mode="list" icon="/static/Empty/msglist_null.png" text="暂无代理申请"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadding: true,
				data: []
			}
		},
		onShow() {
			this._request()
		},
		methods: {
			async _request() {
				const userinfo = uni.getStorageSync('userinfo');
				const {
					data: res
				} = await this.$myHttp({
					url: 'Team/getApplyProduct',
					// data: {},
					header: {
						'token': userinfo.token
					},
				});
				this.loadding = false
				if (res.code == 1) {
					this.data = res.data
				}
			},
			setup(id) {
				uni.navigateTo({
					url: '/pages/index/agent/agent_setup?id=' + id
				})
			},
			dels(id) {
				var that = this
				uni.showModal({
					title: '提交',
					content: '确定要删除吗？',
					success: function(res) {
						if (res.confirm) {
							that.delsfun(id)
						}
					}
				});
			},
			async delsfun(id) {
				var that = this
				const userinfo = uni.getStorageSync('userinfo');
				const {
					data: res
				} = await this.$myHttp({
					url: 'Team/delPolicyRelation',
					data: {
						id: id
					},
					header: {
						'token': userinfo.token
					}
				});
				uni.showToast({
					title: res.msg,
					duration: 2000,
					icon: 'none',
				});
				setTimeout(function() {
					that._request()
				}, 2000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.policy_box {
		// padding: 30rpx;
		box-sizing: border-box;

		.policy_list {
			padding: 20rpx;
			border-radius: 15rpx;
			// box-shadow: 0px 1px 14px -10px #999;
			margin-bottom: 30rpx;


			.generate {
				display: flex;
				justify-content: center;
			}


		}
	}

	.ha_setup_box {
		// padding: 30rpx;
		// margin-top: 30rpx;
		// border-top: #333 1px solid;

		.ha_setup {
			.ha_setup_list {
				margin-bottom: 20rpx;
				padding: 20rpx 0;
				display: flex;
				// align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #efefef;

				.average {
					display: block;
					text-align: center;
					font-size: 24rpx;
					// flex: 1;
				}

				.average:first-child {
					width: 10%;
				}

				.average:not(:first-child) {
					width: 25%;
				}
				
				.setup_btn {
					display: flex;
					justify-content: space-between;
				}

				.setup {
					background-color: #1296db;
					border-radius: 10rpx;
					color: #fff;
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 10rpx 16rpx;
					font-size: 24rpx;
				}

				.dels {
					background-color: #fa3534;
					border-radius: 10rpx;
					color: #fff;
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 10rpx 16rpx;
					font-size: 24rpx;
				}

			}

			.ha_setup_tit {
				border-bottom: #eee 1px solid;
				padding: 20rpx 20rpx;
				background: #f7f8fa;
				font-weight: bold;

			}
		}
	}
</style>